<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/move.css">
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../font/font_ljh/iconfont.css">
  <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
  <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../css/index.css">

  <title>Document</title>
</head>

<body>
  <div class="kong11">
    <div id="mulu">
      <div id="header_query">
        <p>数据查询</p>
        <ul class="clear">
          <li>走步</li>
          <li>体重</li>
          <li>睡眠</li>
          <li>心率</li>
          <li>血压</li>
          <li>血糖</li>
          <li>体温</li>
          <li>运动</li>
        </ul>
      </div>
    </div>

    <div class="bianbian">
      <!-- 1.走步 -->
      <div class="container-fluid one kuangkuang">
        <div id="step_query" class="row">
          <p>查询条件</p>
          <div class="col-md-3 step_kuang">
            用户账号：<input type="text" value="" placeholder="" id="accounts">
          </div>
          <div class="col-md-3 step_duoxuan">
            走步步数：<select name="" id="steps">
              <option value="1000步以上">1000步以上</option>
              <option value="2000步以上">2000步以上</option>
              <option value="3000步以上">3000步以上</option>
              <option value="4000步以上">4000步以上</option>
              <option value="5000步以上">5000步以上</option>
              <option value="6000步以上">6000步以上</option>
            </select>
          </div>
          <div class="col-md-4">
            <div id="step_date">
              日期：<input type="date" value="" placeholder="请选择日期">
              <span>至</span>
              <input type="date" value="" placeholder="请选择日期">
            </div>
          </div>
          <div class="col-md-2">
            <button type="reset" class="reset">重置</button>
            <button type="chaxun" class="chaxun1 chaxun">查询</button>
          </div>
        </div>
        <div id="step_body">
          <div id="step_top" class="row">
            <div class="col-md-6">
              <p>数据列表</p>
            </div>
            <div class="col-md-6">
              <ul class="clear">
                <li><a href="#">导出数据</a></li>
                <li>
                  <span class="iconfont">&#xe633;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe632;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe782;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe625;</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="tdheight">
            <table class="table">
                <thead>
                    <tr class="huise">
                      <th>用户账号</th>
                      <th>用户昵称</th>
                      <th>走步步数</th>
                      <th>走步距离</th>
                      <th>走步时长</th>
                      <th>消耗热量</th>
                      <th>操作</th>
                    </tr>
                </thead>
                <tbody id="step_tbody">
                    
                </tbody>
            </table>
            <div id="fenye" class="clear">
              <div id="pre"><span class="iconfont icon-xiangzuo"></span></div>
              <div id="pageNum">
                
              </div>
              <div id="next"><span class="iconfont icon-xiangyou1"></span></div>
            </div>
          </div>

        </div>
      </div>

      <!-- 模态框 -->
      <!-- Button trigger modal -->
      <!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
      </button> -->

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span></button>
              <h5 class="modal-title" id="myModalLabel">走步明细</h5>
              <p id="modeal_mingxi">导出明细</p>
            </div>
            <div class="modal-body">
              <div id="tdheight" class="juzhongzi">
                <table class="table">
                  <thead>
                    <tr class="huise">
                      <td>日期</td>
                      <td>时间段</td>
                      <td>步数</td>
                    </tr>
                  </thead>
                  <tbody id="modal_tbody">

                  </tbody>
                </table>
                <nav aria-label="Page navigation">
                  <ul class="pagination" id="modalfenye">
                    <li>
                      <a aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li class="motaiye"><a style="background-color: rgb(24,144,255);color: white;">1</a></li>
                    <!-- <li class="motaiye"><a href="#">2</a></li>
              <li class="motaiye"><a href="#">3</a></li> -->
                    <li>
                      <a aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
            </div>
          </div>
        </div>
      </div>


      <!-- 体重 -->
      <div class="container-fluid two kuangkuang">
        <div class="row move_query">
          <p>查询条件</p>
          <div class="col-md-3 move_kuang">
            用户账号：<input type="text" value="" placeholder="" id="accounts" class="yonghuhao">
          </div>
          <div class="col-md-3 move_duoxuan">
            身体类型：<select name="" id="moves" class="weighs">
              <option value="全部">全部</option>
              <option value="标准">标准</option>
              <option value="偏瘦">偏瘦</option>
              <option value="偏胖">偏胖</option>
              <option value="肥胖">肥胖</option>
            </select>
          </div>
          <div class="col-md-4">
            <div class="weigh_date">
              体重：<input type="text" value="" placeholder="">公斤
              <span>至</span>
              <input type="text" value="" placeholder="">公斤
            </div>
          </div>
          <div class="col-md-2">
            <button type="reset" class="reset">重置</button>
            <button type="chaxun" class="chaxun2 chaxun">查询</button>
          </div>
        </div>
        <div class="move_body">
          <div class="row move_top">
            <div class="col-md-6">
              <p>数据列表</p>
            </div>
            <div class="col-md-6">
              <ul class="clear">
                <li><a href="#">导出数据</a></li>
                <li>
                  <span class="iconfont">&#xe633;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe632;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe782;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe625;</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="tdheight">
            <table class="table ">
                <thead>
                    <tr class="huise">
                      <th>用户账号</th>
                      <th>用户昵称</th>
                      <th>体重（公斤）</th>
                      <th>脂肪率</th>
                      <th>BMI</th>
                      <th>身体类型</th>
                      <th>最近测量时间</th>
                      <th>操作</th>
                    </tr>
                </thead>
                <tbody id="weigh_tbody">
                    
                </tbody>
            </table>
            <div id="fenye" class="clear">
              <div id="pre"><span class="iconfont icon-xiangzuo"></span></div>
              <div id="pageNum">

              </div>
              <div id="next"><span class="iconfont icon-xiangyou1"></span></div>
            </div>
          </div>

        </div>
      </div>


      <!-- 睡眠 -->
      <div class="container-fluid three kuangkuang">
        <div class="row move_query">
          <p>查询条件</p>
          <div class="col-md-3 move_kuang">
            用户账号：<input type="text" value="" placeholder="" id="accounts">
          </div>

          <div class="col-md-7 juzhong_date">
            <div class="move_date">
              日期：<input type="date" value="" placeholder="请选择日期">
              <span>至</span>
              <input type="date" value="" placeholder="请选择日期">
            </div>
          </div>
          <div class="col-md-2">
            <button type="reset" class="reset">重置</button>
            <button type="chaxun" class="chaxun3 chaxun">查询</button>
          </div>
        </div>
        <div class="move_body">
          <div class="row move_top">
            <div class="col-md-6">
              <p>数据列表</p>
            </div>
            <div class="col-md-6">
              <ul class="clear">
                <li><a href="#">导出数据</a></li>
                <li>
                  <span class="iconfont">&#xe633;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe632;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe782;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe625;</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="tdheight">
            <table class="table ">
              <thead>
                <tr class="huise">
                  <th>用户账号</th>
                  <th>用户昵称</th>
                  <th>累计睡眠时长</th>
                  <th>累计深睡时长</th>
                  <th>累计浅睡时长</th>
                  <th>累计清醒时长</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="sleep_tbody">
                <!-- <tr>
                      <td>北京市</td>
                      <td>2222</td>
                    </tr>
                    <tr>
                      <td>333</td>
                      <td>2222</td>
                    </tr>
                    <tr>
                      <td>333</td>
                      <td>2222</td>
                    </tr> -->
              </tbody>
            </table>
            <div id="fenye" class="clear">
              <div id="pre" onclick="pre()"><span class="iconfont icon-xiangzuo"></span></div>
              <div id="pageNum">
                <!-- <div class="pageItem">1</div>
                <div class="pageItem">2</div>
                <div class="pageItem">3</div>
                <div class="pageItem">4</div>
                <div class="pageItem">5</div> -->
              </div>
              <div id="next" onclick="next()"><span class="iconfont icon-xiangyou1"></span></div>
            </div>
          </div>

        </div>
      </div>


      <!-- 心率 -->
      <div class="container-fluid four kuangkuang">
        <div class="row rate_query">
          <p>查询条件</p>
          <div class="col-md-3 move_kuang">
            用户账号：<input type="text" value="" placeholder="" id="accounts">
          </div>

          <div class="col-md-7">
            <div class="move_date">
              日期：<input type="date" value="" placeholder="请选择日期">
              <span>至</span>
              <input type="date" value="" placeholder="请选择日期">
            </div>
          </div>
          <div class="col-md-2">
            <button type="reset" class="reset">重置</button>
            <button type="chaxun" class="chaxun4 chaxun">查询</button>
          </div>
        </div>
        <div class="rate_body">
          <div class="row rate_top">
            <div class="col-md-6">
              <p>数据列表</p>
            </div>
            <div class="col-md-6">
              <ul class="clear">
                <li><a href="#">导出数据</a></li>
                <li>
                  <span class="iconfont">&#xe633;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe632;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe782;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe625;</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="tdheight">
            <table class="table ">
                <thead>
                    <tr class="huise">
                      <th>用户账号</th>
                      <th>用户昵称</th>
                      <th>平均静息心率</th>
                      <th>静息心率过高</th>
                      <th>静息心率过低</th>
                    </tr>
                </thead>
                <tbody id="rate_tbody">
                    
                </tbody>
            </table>
            <div id="fenye" class="clear">
              <div id="pre" onclick="pre()"><span class="iconfont icon-xiangzuo"></span></div>
              <div id="pageNum">
                
              </div>
              <div id="next" onclick="next()"><span class="iconfont icon-xiangyou1"></span></div>
            </div>
          </div>

        </div>
      </div>


      <!-- 血压 -->
      <div class="container-fluid five kuangkuang">
        <div class="row rate_query">
          <p>查询条件</p>
          <div class="col-md-3 move_kuang">
            用户账号：<input type="text" value="" placeholder="" id="accounts">
          </div>

          <div class="col-md-7 move_duoxuan">
            血压状态：<select name="" id="moves">
              <option value="全部">全部</option>
              <option value="高压偏高">高压偏高</option>
              <option value="高压偏低">高压偏低</option>
              <option value="低压偏高">低压偏高</option>
              <option value="高压低压均高">高压低压均高</option>
              <option value="高压低压均低">高压低压均低</option>
            </select>
          </div>
          <div class="col-md-2">
            <button type="reset" class="reset">重置</button>
            <button type="chaxun" class="chaxun5 chaxun">查询</button>
          </div>
        </div>
        <div class="rate_body">
          <div class="row rate_top">
            <div class="col-md-6">
              <p>数据列表</p>
            </div>
            <div class="col-md-6">
              <ul class="clear">
                <li><a href="#">导出数据</a></li>
                <li>
                  <span class="iconfont">&#xe633;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe632;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe782;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe625;</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="tdheight">
            <table class="table ">
                <thead>
                    <tr class="huise">
                      <th>用户账号</th>
                      <th>用户昵称</th>
                      <th>平均高压</th>
                      <th>平均低压</th>
                      <th>操作</th>
                    </tr>
                </thead>
                <tbody id="blood_tbody">
                    
                </tbody>
            </table>
            <div id="fenye" class="clear">
              <div id="pre" onclick="pre()"><span class="iconfont icon-xiangzuo"></span></div>
              <div id="pageNum">
                
              </div>
              <div id="next" onclick="next()"><span class="iconfont icon-xiangyou1"></span></div>
            </div>
          </div>

        </div>
      </div>


      <!-- 血糖 -->
      <div class="container-fluid six kuangkuang">
        <div class="row rate_query">
          <p>查询条件</p>
          <div class="col-md-3 move_kuang">
            用户账号：<input type="text" value="" placeholder="" id="accounts">
          </div>

          <div class="col-md-7 move_duoxuan">
            血糖状态：<select name="" id="moves">
              <option value="全部">全部</option>
              <option value="偏高">偏高</option>
              <option value="偏低">偏低</option>
            </select>
          </div>
          <div class="col-md-2">
            <button type="reset" class="reset">重置</button>
            <button type="chaxun" class="chaxun6 chaxun">查询</button>
          </div>
        </div>
        <div class="rate_body">
          <div class="row rate_top">
            <div class="col-md-6">
              <p>数据列表</p>
            </div>
            <div class="col-md-6">
              <ul class="clear">
                <li><a href="#">导出数据</a></li>
                <li>
                  <span class="iconfont">&#xe633;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe632;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe782;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe625;</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="tdheight">
            <table class="table ">
                <thead>
                    <tr class="huise">
                      <th>用户账号</th>
                      <th>用户昵称</th>
                      <th>血糖</th>
                      <th>最近测量时间</th>
                      <th>操作</th>
                    </tr>
                </thead>
                <tbody id="sugar_tbody">
                    
                </tbody>
            </table>
            <div id="fenye" class="clear">
              <div id="pre" onclick="pre()"><span class="iconfont icon-xiangzuo"></span></div>
              <div id="pageNum">
                
              </div>
              <div id="next" onclick="next()"><span class="iconfont icon-xiangyou1"></span></div>
            </div>
          </div>

        </div>
      </div>


      <!-- 体温 -->
      <div class="container-fluid seven kuangkuang">
        <div class="row rate_query">
          <p>查询条件</p>
          <div class="col-md-3 move_kuang">
            用户账号：<input type="text" value="" placeholder="" id="accounts">
          </div>

          <div class="col-md-7 move_duoxuan">
            体温状态：<select name="" id="moves">
              <option value="全部">全部</option>
              <option value="低烧">低烧</option>
              <option value="发烧">发烧</option>
              <option value="高烧">高烧</option>
            </select>
          </div>
          <div class="col-md-2">
            <button type="reset" class="reset">重置</button>
            <button type="chaxun" class="chaxun7 chaxun">查询</button>
          </div>
        </div>
        <div class="rate_body">
          <div class="row rate_top">
            <div class="col-md-6">
              <p>数据列表</p>
            </div>
            <div class="col-md-6">
              <ul class="clear">
                <li><a href="#">导出数据</a></li>
                <li>
                  <span class="iconfont">&#xe633;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe632;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe782;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe625;</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="tdheight">
            <table class="table">
                <thead>
                    <tr class="huise">
                      <th>用户账号</th>
                      <th>用户昵称</th>
                      <th>体温</th>
                      <th>最近测量时间</th>
                      <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tiwen_tbody">
                    
                </tbody>
            </table>
            <div id="fenye" class="clear">
              <div id="pre" onclick="pre()"><span class="iconfont icon-xiangzuo"></span></div>
              <div id="pageNum">
                
              </div>
              <div id="next" onclick="next()"><span class="iconfont icon-xiangyou1"></span></div>
            </div>
          </div>

        </div>
      </div>


      <!-- 运动 -->
      <div class="container-fluid eight kuangkuang">
        <div class="row move_query">
          <p>查询条件</p>
          <div class="col-md-3 move_kuang">
            用户账号：<input type="text" value="" placeholder="" id="accounts">
          </div>
          <div class="col-md-3 move_duoxuan">
            运动类型：<select name="" id="moves">
              <option value="全部">全部</option>
              <option value="raceDistance">跑步</option>
              <option value="squatNum">深蹲</option>
              <option value="situpNum">仰卧起坐</option>
              <option value="pushupNum">俯卧撑</option>
            </select>
          </div>
          <div class="col-md-4">
            <div class="move_date">
              日期：<input type="date" value="" placeholder="请选择日期">
              <span>至</span>
              <input type="date" value="" placeholder="请选择日期">
            </div>
          </div>
          <div class="col-md-2">
            <button type="reset" class="reset">重置</button>
            <button type="chaxun" class="chaxun8 chaxun">查询</button>
          </div>
        </div>
        <div class="move_body">
          <div class="row move_top">
            <div class="col-md-6">
              <p>数据列表</p>
            </div>
            <div class="col-md-6">
              <ul class="clear">
                <li><a href="#">导出数据</a></li>
                <li>
                  <span class="iconfont">&#xe633;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe632;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe782;</span>
                </li>
                <li>
                  <span class="iconfont">&#xe625;</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="tdheight">
            <table class="table ">
                <thead>
                    <tr class="huise">
                      <th>用户账号</th>
                      <th>用户昵称</th>
                      <th>跑步距离</th>
                      <th>深蹲数量</th>
                      <th>仰卧起坐数量</th>
                      <th>俯卧撑数量</th>
                      <th>操作</th>
                    </tr>
                </thead>
                <tbody id="move_tbody">
                    
                </tbody>
            </table>
            <div id="fenye" class="clear">
              <div id="pre" onclick="pre()"><span class="iconfont icon-xiangzuo"></span></div>
              <div id="pageNum">
                
              </div>
              <div id="next" onclick="next()"><span class="iconfont icon-xiangyou1"></span></div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>

  <!-- 内容 -->

  <div class="col-md-10 col-md-offset-2">
    <span class="foot1">大健康综合管理后台</span>
    <span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
    <span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
  </div>

  <script src="../JavaScript/index.js"></script>
  <script src="../JavaScript/data.js"></script>
  <script src="../JavaScript/utils.js"></script>


  <script>
    let dangqianye = 1
    let maxPage
    let fenyeData = queryData
    $('#header_query ul li').click(function () {
      this.style.color = 'rgb(24,174,255)'
      let x = 0
      // console.log($('#header_query ul li')[0])
      for (i = 0; i < $('#header_query ul li').length; i++) {
        if (this != $('#header_query ul li')[i]) {
          $('#header_query ul li')[i].style.color = '#555'
        }
        else {
          x = i
        }
      }
      // console.log($('.kuangkuang'))
      $('.kuangkuang').css({
        display: 'none'
      })
      $('.kuangkuang').eq(x).css({
        display: 'block'
      })

    })


    let modalData = [
      { modalDate: '2020-1-1', modalSpan: '8:00-8:20', modalStep: 2685 },
      { modalDate: '2020-1-2', modalSpan: '8:00-8:20', modalStep: 2876 },
      { modalDate: '2020-1-3', modalSpan: '8:00-8:20', modalStep: 3245 },
      { modalDate: '2020-1-4', modalSpan: '8:00-8:20', modalStep: 3028 },
      { modalDate: '2020-1-5', modalSpan: '8:00-8:20', modalStep: 3785 },
    ]
    function showModal(obj) {
      //将数据源渲染到modal_tbody里面
      $('#modal_tbody').html('')
      $.each(obj, (index, item) => {
        $('#modal_tbody').append(`
            <tr>
              <td>${item.modalDate}</td>  
              <td>${item.modalSpan}</td>  
              <td>${item.modalStep}</td> 
            </tr>
          `)
      })
    }
      showModal(modalData)

      
      function showTable(data){
      // 1.将数据源渲染到step_tbody里面
      $('#step_tbody').html('')
      $.each(data, (index, item) => {
        $('#step_tbody').append(`
            <tr>
              <td>${item.userAccount}</td>  
              <td>${item.userName}</td>  
              <td>${item.stepNum}</td>  
              <td>${item.walkDistance}</td>  
              <td>${item.walkTime}</td>  
              <td>${item.calories}</td>
              <td>
                <p class='chakanjilu'><a href="#" data-toggle="modal" data-target="#myModal">查看记录</a></p>  
              </td>  
            </tr>
          `)
      })
      // console.log(data)


      // 2.将数据源渲染到weigh_tbody里面
      $('#weigh_tbody').html('')
      $.each(data, (index, item) => {
        $('#weigh_tbody').append(`
            <tr>
              <td>${item.userAccount}</td>  
              <td>${item.userName}</td>  
              <td>${item.weight}</td>  
              <td>${item.fatRate}</td>  
              <td>${item.bmi}</td>  
              <td>${item.bodyType}</td>
              <td>${item.measureWeighTime}</td>
              <td>
                <p class='chakanjilu'><a href="#">查看更多</a></p>  
              </td>  
            </tr>
          `)
      })

      // 3.将数据源渲染到sleep_tbody里面
      $('#sleep_tbody').html('')
      $.each(data, (index, item) => {
        $('#sleep_tbody').append(`
            <tr>
              <td>${item.userAccount}</td>  
              <td>${item.userName}</td>  
              <td>${item.sleepTime}</td>  
              <td>${item.deepSleepTime}</td>  
              <td>${item.lightSleepTime}</td>  
              <td>${item.wakeTime}</td>
              <td>
                <p class='chakanjilu'><a href="#">查看明细</a></p>  
              </td>  
            </tr>
          `)
      })


      // 4.将数据源渲染到rate_tbody里面
      $('#rate_tbody').html('')
      $.each(data, (index, item) => {
        $('#rate_tbody').append(`
            <tr>
              <td>${item.userAccount}</td>  
              <td>${item.userName}</td>  
              <td>${item.meanRate}</td>  
              <td>${item.higherRate}</td>  
              <td>${item.lowerRate}</td>  
            </tr>
          `)
      })


      // 5.将数据源渲染到blood_tbody里面
      $('#blood_tbody').html('')
      $.each(data, (index, item) => {
        $('#blood_tbody').append(`
            <tr>
              <td>${item.userAccount}</td>  
              <td>${item.userName}</td>  
              <td>${item.averageHighPressure}</td>  
              <td>${item.averageLowPressure}</td>  
              <td>
                <p class='chakanjilu'><a href="#">查看明细</a></p>  
              </td>  
            </tr>
          `)
      })


      // 6.将数据源渲染到sugar_tbody里面
      $('#sugar_tbody').html('')
      $.each(data, (index, item) => {
        $('#sugar_tbody').append(`
            <tr>
              <td>${item.userAccount}</td>  
              <td>${item.userName}</td>  
              <td>${item.bloodSugar}</td>  
              <td>${item.measureBloodTime}</td>
              <td>
                <p class='chakanjilu'><a href="#">查看记录</a></p>  
              </td>  
            </tr>
          `)
      })


      // 7.将数据源渲染到tiwen_tbody里面
      $('#tiwen_tbody').html('')
      $.each(data, (index, item) => {
        $('#tiwen_tbody').append(`
            <tr>
              <td>${item.userAccount}</td>  
              <td>${item.userName}</td>  
              <td>${item.temperature}</td>  
              <td>${item.measureTemperatureTime}</td> 
              <td>
                <p class='chakanjilu'><a href="#">查看记录</a></p>  
              </td>  
            </tr>
          `)
      })


      // 8.将数据源渲染到move_tbody里面
      $('#move_tbody').html('')
      $.each(data, (index, item) => {
        $('#move_tbody').append(`
            <tr>
              <td>${item.userAccount}</td>  
              <td>${item.userName}</td>  
              <td>${item.raceDistance}</td>  
              <td>${item.squatNum}</td>  
              <td>${item.situpNum}</td>  
              <td>${item.pushupNum}</td>
              <td>
                <p class='chakanjilu'><a href="./yundongmingxi.html">查看明细</a></p>  
              </td>  
            </tr>
          `)
      })

    }
    // showTable(queryData)

    // 2.渲染页数，数据的长度/5 显示数据有多少页
    function showPage(data) {
      // $('#fenye').html('')
      // 多出的数据也要单独占一页，所以向上取整
      maxPage = Math.ceil(data.length / 5)
      for (let i = 1; i <= maxPage; i++) {
        $('#fenye #pageNum').append(`
          <div data-page='${i}' class="page">${i}</div>
        `)
      }
    }
    showPage(fenyeData)

    // 3.分页--每页只显示5条数据
    function fenYe(num,data) {
      $('.page').css({ 'backgroundColor': 'white', 'color': 'black' })
      $('.page')[num - 1].style.backgroundColor = 'rgb(24, 144, 255)'
      $('.page')[num - 1].style.color = 'rgb(255, 255, 255)'
            
     //页码和起始下标的关系
     let qishi = (num - 1) * 5
     let arr = data.slice(qishi, qishi + 5)
     showTable(arr)
     dangqianye = num
    }
    fenYe(1,fenyeData)
    
    // 4.给分页绑定点击事件，点击哪一页，哪一页对应的5条数据就显示
    $('#fenye #pageNum').on('click', '.page', function () {
      console.log($('.page'))
      let num = parseInt($(this).attr('data-page'))
      fenYe(num, fenyeData)
    })
    // showPage(1)

    // 5.给上一页和下一页绑定点击事件
    // 点击上一页，从当前页--，当前页==1时，上一页不会再执行
    // 点击下一页，从当前页++，当前页==maxPage时，下一页不会再执行
    $('#fenye').on('click', '#pre', function () {
      // console.log(this)
      if (dangqianye != 1) {
        dangqianye--
        // let num = dangqianye - 1
        fenYe(dangqianye,fenyeData)
      }
    })
    $('#fenye').on('click', '#next', function () {
      // console.log(this)
      if (dangqianye < maxPage) {
        dangqianye++
        fenYe(dangqianye, fenyeData)
      }
    })


    // 6.点击哪一页，哪一页的样式会变颜色，点击另一页，上一页颜色变回原色
    window.onload = function () {
      $('.page:first-child').addClass('color')
    }

    // 查询
    $('.chaxun1').click(function (){
      if($('#accounts').val() == ''){
        if($('#steps').val() != ''){
          let bubuData = queryData.filter(item => item.stepNum > parseInt($('#steps').val()))
           fenyeData = bubuData
        }
      }
      if($('#accounts').val() != '' && $('#steps').val() != ''){
        let data = queryData.filter(item => item.userAccount == $('#accounts').val())
        fenyeData = data
      }
      fenYe(1,fenyeData)
    })
    // fenYe(1,fenyeData)


    $('.chaxun2').click(function () {
      if($('.yonghuhao').val() == ''){
        if($('.weighs').val() != ''){
          let data2 = queryData.filter(item => item.bodyType == $('.weighs').val())
           fenyeData = data2
        }
      }
      if($('.yonghuhao').val() != '' && $('#steps').val() != ''){
        let data = queryData.filter(item => item.userAccount == $('.yonghuhao').val())
        fenyeData = data
      }
      fenYe(1,fenyeData)
    })

    // 重置
    $('.reset').click(function () {
      fenyeData = queryData
      fenYe(1, fenyeData)
    })

    // fenYe(1,queryData)



  </script>

</body>

</html>